<template>
  <div>
    <br>
    <el-form :inline="true">
      <el-form-item label="单据编号">
        <el-input v-model="searchMap.orderId"></el-input>
      </el-form-item>
      <el-form-item label="商品信息">
        <el-input v-model="searchMap.productName"></el-input>
      </el-form-item>
      <el-form-item label="单据日期">
        <div class="block">
          <el-date-picker
            v-model="searchMap.time"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </div>
      </el-form-item>
      <el-button type="primary" @click="searchData()">查询</el-button>
      <el-button type="primary" @click="reset()">重置</el-button>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleEdit('')">新增</el-button>
      </el-col>
<!--      <el-col :span="1">-->
<!--        <el-button type="danger" icon="el-icon-delete" size="mini" >删除</el-button>-->
<!--      </el-col>-->
    </el-row>
    <el-table
      :data="list"
      border
      style="padding-left: 1px;" size="small">
      <el-table-column
        fixed
        label="操作"
        width="150">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom">
            <el-button @click="handleEdit(scope.row.id)" type="text" icon="el-icon-edit" size="small" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button @click="handleDelete(scope.row.id)" type="text" icon="el-icon-delete" size="small"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>	      <!-- fixed="left" -->
      <el-table-column
        prop="orderId"
        label="单据编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="商品信息"
        width="120">
      </el-table-column>
      <el-table-column
        prop="unitPrice"
        label="单价"
        width="120">
      </el-table-column>
      <el-table-column
        prop="operNumber"
        label="数量"
        width="120">
      </el-table-column>
      <el-table-column
        prop="allPrice"
        label="金额合计"
        width="100">
      </el-table-column>
      <el-table-column
        prop="operator"
        label="操作员"
        width="120">
      </el-table-column>

    </el-table>

    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="80px">
        <el-form-item label="商品信息">
<!--          <el-input v-model="pojo.productName"></el-input>-->
          <el-select v-model="pojo.productId" placeholder="请选择" @change="setProductName()">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="pojo.operNumber" @input="calculate()"></el-input>
        </el-form-item>
        <el-form-item label="单价">
          <el-input v-model="pojo.unitPrice" disabled=true></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model="pojo.allPrice" disabled=true></el-input>
        </el-form-item>
        <el-form-item label="操作员">
          <el-input v-model="pojo.operator"></el-input>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="pojo.remark">
          </el-input>
        </el-form-item>
      <!--  <el-form-item label="是否设为默认账户">
          <el-switch
            v-model="pojo.state"
            active-value="true"
            inactive-value="false">
          </el-switch>
        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
	      <el-button @click="dialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="handleSave()">确 定</el-button>
	    </span>
    </el-dialog>



    <!--<el-dialog
      title="新增零售出库信息"
      :visible.sync="dialogVisible"
      width="80%">-->

     <!-- <el-form :inline="true">
        <el-form-item label="订单编号" size="mini">
          <el-input v-model="addMap.orderId" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="商品信息" size="mini">
          <el-input v-model="addMap.materiaId" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="单据日期" size="mini">
          <div class="block">
            <el-date-picker
              v-model="addMap.time"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>-->
 <!--     <el-row>
        <el-button type="primary" icon="el-icon-edit" @click="addRow()" size="mini">新增行</el-button>
      </el-row>-->

     <!-- <el-form :model="retailForm" ref="retailForm">
      <el-table
        :data="retailForm.saveList"
        border
        style="width: 100%"
        size="small">
        <el-table-column label="仓库名称" width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'saveList.'+scope.$index+'.stockhouseName'">
              <el-select v-model="scope.row.stockhouseName" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          label="产品"
          width="180">
          <template slot-scope="scope">
            <el-form-item :prop="'saveList.'+scope.$index+'.productName'">
              <el-select v-model="scope.row.name" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="inventory"
          label="库存"
          width="80">
        </el-table-column>
        <el-table-column
          prop="munit"
          label="单位"
          width="80">
        </el-table-column>
        <el-table-column
          label="数量"
          width="80">
          <template slot-scope="scope">
            <el-form-item :prop="'saveList.'+scope.$index+'.operNumber'">
               <el-input v-model="scope.row.operNumber" ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="unitPrice"
          label="单价"
          width="80">
        </el-table-column>
        <el-table-column
          prop="allPrice"
          label="金额"
          width="80">
        </el-table-column>
        <el-table-column
          label="备注"
          width="180">
        </el-table-column>

        <template slot-scope="scope">
          <el-form-item :prop="'saveList.'+scope.$index+'.remark'">
            <el-input v-model="scope.row.remark" ></el-input>
          </el-form-item>
        </template>
        <el-table-column
          label="删除"
          width="180">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="deleteRow(scope.$index)" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
	      <el-button @click="dialogVisible = false">取 消</el-button>
	      <el-button type="primary" @click="handleSave()">确 定</el-button>
	    </span>
    </el-dialog>-->
  </div>
</template>

<script>
  import resaleApi from '@/api/resale'
  import productApi from '@/api/product'
  import table from '../../../mock/table'
  export default{
    name: 'erp_retail',
    data(){
      return{
        list:[],
        type:"零售出库",
        total:0,			//总记录数
        currentPage:1,		//当前页
        pageSize:10,		//每页大小
        searchMap:{ 'type':'零售出库'},		//查询条件
        addMap:{}, //新增条件
        dialogVisible: false,//对话框是否可见
        pojo:{},//表单绑定的属性
        id:'',
        options: [],
        value: ''
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      addRetail(){
        this.dialogVisible=true

      },
      fetchData(){
        resaleApi.findAll(this.type,this.currentPage,this.pageSize).then(response=>{
          this.list=response.data.rows
          this.total=response.data.total
        })
      },
      searchData(){
        resaleApi.search(this.searchMap,this.currentPage,this.pageSize).then(response=>{
          this.list=response.data.rows
          this.total=response.data.total
        })
      },
      handleSave(){
        resaleApi.update(this.id,this.pojo).then(response=>{
          this.$message({
            message:response.message,
            type:'success'
          });
          if(response.flag){
            this.fetchData()
          }
        })
        this.dialogVisible=false
      },
      handleEdit(id){
        this.dialogVisible=true
        this.id=id

        productApi.findProduct().then(resp=> {
          this.options = resp.data
        })
        if(id!=''){

          resaleApi.findById(id).then(response=>{
            if(response.flag)
              this.pojo=response.data
          })
        }else{
          this.pojo={'type':'零售出库'}
          }
      },
      reset(){
        this.searchMap={'type':'零售出库'};
      },
      /*addRow(){
        let singleData = {
        }
        this.retailForm.saveList.push(singleData)
      },
      deleteRow(index) {
        this.tableData.splice(index,1);
      }*/
      handleDelete(id){
        this.$confirm('确定要删除此纪录吗？','提示',{
          confirmButtonText:'确定',
          cancelButtonTexxt:'取消',
          type:'warning'
        }).then(()=>{
          resaleApi.deleteById(id).then(response=>{
            this.$message({
              message:response.message,
              type:'success'
            });
            this.fetchData()
          })
        })

      },
      setProductName(){
        for(let i=0;i<this.options.length;i++){
          if(this.options[i].id==this.pojo.productId){
            this.pojo.productName=this.options[i].name
            this.pojo.unitPrice=this.options[i].sellingPrice
          }
        }
      },
      calculate(){
        this.pojo.allPrice=this.pojo.operNumber*this.pojo.unitPrice
      }

    }
  }
</script>

<style scoped>

</style>
